UI 的組成順序：原子 → 分子 → 組織 → 模板 → 頁面。

在上一篇已經把 UI 元件做了分類，再來就要依據 UI 的組成順序組裝起來，我們選擇最常被使用的頁面，UI 元件較齊全的頁面來進行組裝／佈局。

以查詢頁面為例，我們需要的 UI 元件有：

原子：

是 UI 的最小單位，在這個頁面我們會用到：

分子：

是由原子所組合而成的 UI 元件，例如：Label + input = 一個表單元件。 這裡我們會組合以下分子：

組織：

比分子更大更複雜的 UI 元件，是由一個一個分子組合而成，例如：表單的組成會有：Modal、Title、Label、Button Line。我們要建構的組織有：

模板：

像拼圖一樣，照著我們想要的頁面佈局，把組織一個一個拼起來，形成獨立且完整的 UI 元件，這個獨立且完整的 UI 元件，可在不同的頁面有不同的布局（例如：A頁面有放，B頁面沒有放），都不會影響它的狀態或互動機制。我們的模板有：

頁面：

完整呈現頁面的佈局樣式，包括在不同裝置上的可視性也要設計進去，在頁面階段尤其注重格線系統的規劃，若考量不週全，則會使RWD失敗而破版。

接下來我們就要開始針對每一個元件做設計定義：Color、Typography、Spacing、Icon、Button、input、Select⋯⋯，設計定義做好了，才能進行以上的組合，進而完成一個完整的頁面，才能做交付文件。挑戰尚未成功，捧油們繼續努力，加油啊！（這是說給我聽的 QQ）